<template>
	<div class="tabs">
			<div class="tab scroll-view_H" ref="scrollDiv">
					<!-- <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view> -->
					<div v-for="(item,index) in tab" @tap="goTab(item)" :key="index" class="scroll-view-item_H" :class="{active:current == item.id,'disable':item.disable == true}">{{item.name}}</div>
			 </div>
			<!-- <div>
				<img src="../../static/img/sousuo.png" class="search" alt="" @tap="goSearch">
			</div> -->
	</div>
</template>

<script>
	import path from '@/util/path.js';
	export default {
		name:"tab",
		// props:{
		// 	current:{
		// 		type:String,
		// 		default:0
		// 	},
		// 	scrollLeft:{
		// 		type:Number,
		// 		default:0
		// 	}
		// },
		props:['current','scrollLeft','goId'],
		data() {
			return {
				tab:[
					{"name":'活动介绍',"path":"/pages/tab-infor/tab-infor","id":1},
					// {"name":'参赛作品',"path":"/pages/tab-work/tab-work","id":2},
					// {"name":'投票排行',"path":"/pages/tab-rank/tab-rank"},
					// {"name":'获奖作品',"path":"/pages/tab-price/tab-price"},
					// {"name":'查询证书',"path":"/pages/tab-query/tab-query"}
				]
			}
		},
		mounted() {
			var id = this.$route.query.id;
			this.getdec(id);
		},
		methods:{
			async getdec(id) {
					const res = await this.$httpPub({
						  url:'activity/' + id,
						  method:'get',
						  data:{}
					})
				 // console.log(res);
				 var num = Number(res.current_stage);
				 var num2 = Number(res.is_cert_tab);
				 var is_award = res.is_award;
				 var is_open = res.is_open;
				 
				 if(is_open) {
					 this.tab.push({"name":'参赛作品',"path":"/pages/tab-work/tab-work","id":2})
				 }
				
				
				 if (num == 5 && is_award) {
					this.tab.push({"name":'获奖作品',"path":"/pages/tab-price/tab-price"})
				 }
				 
				 
				 if( num2 == 0 ) {
					this.tab.push({
						"name":'我的证书',"path":"/pages/tab-cert/tab-cert","disable":true,"id":4
					})			 
				 } 
				 
				 if( num2 == 1 ) {
					this.tab.push({
						"name":'我的证书',"path":"/pages/tab-cert/tab-cert","id":4
					})			 
				 } 
				 setTimeout(()=> {
				 	this.goScroll();
				 },10)
				 // console.log(this.tab);
			},
			goTab(item) {
				// var num = this.old.scrollLeft
				if(item.disable) {
					uni.showToast({
						title:'稍后开放',
						icon:'none'
					})
					return;
				}
				uni.redirectTo({
					url:item.path + "?id=" + this.goId 
				})
			},
			goScroll(){
				// console.log(this.scrollLeft);
				 let scrollElem = this.$refs.scrollDiv; // 对应ref的命名
				 scrollElem.scrollTo({left:this.scrollLeft});
			},
		    goSearch(){
				uni.navigateTo({
					url:"/pages/search/search?id=" + this.goId 
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	

  .tabs {
	  padding: 36rpx 42rpx 10rpx 42rpx;
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  // background-color: #fff;
	  font-size: 30rpx;
	  height: 108rpx;
	  border-radius: 20rpx;
	  align-items: center;
	  box-sizing: border-box;
  }
  .search {
	  width: 34rpx;
	  height: 34rpx;
	  position: relative;
	  top:4rpx;
  }
  
  .scroll-Y {
  		height: 300rpx;
  	}
  	.scroll-view_H {
  		white-space: nowrap;
  		width: 560rpx;
		overflow-y: hidden;
		overflow-x: auto;
  	}
  
  	.scroll-view-item_H {
  		display: inline-block;
  		width: 150rpx;
  		text-align: center;
  		font-size: 35rpx;
		padding-bottom: 17rpx;
		margin-right: 22rpx;
		&.active {
			 color:#333333;
			 font-weight: bold;
			 background-image: url('../../static/img/tab_active.png');
			 background-size: auto 28rpx;
			 background-repeat: no-repeat;
			 background-position:10rpx bottom;
		}
		&.disable {
			color: #b9b8b8;
		}
  	}
</style>